<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物管理</title>
    <link rel="stylesheet" href="../assets/bootstrap.min.css">
</head>

<body>
<!-- 弹出框 -->
<div class="modal fade" id="addRolePop" tabindex="-1" aria-labelledby="addRolePopLa" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addRolePopLa">添加宠物</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="d-grid gap-3" id="addRoleForm">
                    <input type="hidden" id="petId">
                    <input type="hidden" id="clientId">
                    <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="myFile">宠物头像</label>
                        <div class="col-md-8">
                            <label for="myFile"><img id="rolePhoto" src="../picture/none.png" alt=""
                                                     style="height: 60px;width: 60px"/></label>
                            <input type="file" accept="image/*" id="myFile" hidden="hidden"/>
                            <label for="myFile" id="myFileText"
                                   style="color: red;display: none">上传文件大小应小于3MB</label>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="petName">宠物姓名</label>
                        <div class="col-md-8">
                            <input class="form-control" id="petName" type="text" placeholder="宠物姓名">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label" for="petVariety">宠物品种</label>
                        <div class="col-sm-8">
                            <input class="form-control" id="petVariety" type="text" placeholder="品种">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">性别</label>
                        <div class="radio col-sm-2">
                            <label>
                                <input class="form-check-input" name="petSexRad" id="petSexRad_1" type="radio"
                                       checked>公
                            </label>
                        </div>
                        <div class="radio col-sm-2">
                            <label>
                                <input class="form-check-input" name="petSexRad" id="petSexRad_2" type="radio">母
                            </label>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label" for="petAge">出生日期</label>
                        <div class="col-sm-8">
                            <input class="form-control" id="petAge" type="date">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label" for="petStatus">健康状态</label>
                        <div class="col-sm-8">
                            <input class="form-control" id="petStatus" type="text" placeholder="健康状态">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label" for="clientName">主人</label>
                        <div class="col-sm-8">
                            <input class="form-control" list="clientOp" id="clientName" placeholder="宠物主人"
                                   autocomplete="off">
                            <datalist id="clientOp"></datalist>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="petInfo">宠物近况</label>
                        <div class="col-md-8">
                            <input class="form-control" id="petInfo" type="text" placeholder="宠物近况">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" data-bs-dismiss="modal" type="button" id="submitForm">确认提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 搜索与添加与批量删除 -->
<nav class="navbar bg-light sticky-top">
    <div class="container-fluid">
        <form class="d-flex" role="search" onsubmit="return false">
            <button class="btn btn-success" id="changSearch" type="button">宠</button>
            <input class="form-control me-2" type="search" placeholder="宠物名字" aria-label="Search" id="searchInput">
            <button class="btn btn-outline-success" type="submit" onclick="sss.getAll()">Search</button>
        </form>
        <div class="d-flex flex-row-reverse bd-highlight">
            <button type="button" class="btn btn-danger ms-1" id="delALL">批量删除</button>
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addRolePop"
                    onclick="sss.addTit()">添加宠物
            </button>
        </div>
    </div>
</nav>
<!-- 表格 -->
<table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th><input class="form-check-input ms-3" type="checkbox" id="checkALL"><label for="checkALL"></label></th>
        <th>图片</th>
        <th>姓名</th>
        <th>品种</th>
        <th>性别</th>
        <th>年龄</th>
        <th>健康状况</th>
        <th>近况</th>
        <th>主人</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tb-main">
    </tbody>
</table>
</body>
<script src="../assets/bootstrap.bundle.min.js"></script>
<script src="../assets/axios.js"></script>
<script src="z-myJS.js"></script>
<script type="text/javascript">
    const bbb = new MixImg()//重写方法
    class MixRole2 extends MixRole {
        getAll(numPage = 1) {
            const searchInput = document.getElementById("searchInput")
            const json = {"numPage": numPage, "pageSize": this.getPageSize()}
            if (searchInput.placeholder === "宠物名字") {
                json["petName"] = searchInput.value
            } else {
                json["clientName"] = searchInput.value
            }
            axios.get(this._role + "/page", {
                params: json
            }).then(resp => {
                this.addTableRow(resp.data["data"]);
                this.pageStripWrite(resp.data["len"], numPage)
            })
        }// 添加标题
        addTit() {
            super.addTit()
            bbb.change('')
        }// 修改标题
        upTit(h) {
            bbb.change('')
            super.upTit(h);
        }
    }//建立对象
    const sss = new MixRole2("pet", "宠物")
    window.onload = () => {
        sss.getAll();
        getOther()
        bindDataChange("client");
    }//更改搜索框的提示
    const searchInput = document.getElementById("searchInput")
    document.getElementById("changSearch").onclick = function () {
        searchInput.value = ''
        if (searchInput.placeholder === "宠物名字") {
            this.innerHTML = "主"
            this.className = "btn btn-danger"
            searchInput.placeholder = "主人姓名"
        } else {
            this.innerHTML = "宠"
            this.className = "btn btn-success"
            searchInput.placeholder = "宠物名字"
        }
    }// 向表格类动态添加数据
    function getDataRow(h) {
        const row = document.createElement('tr'),
            {petId, petName, petVariety, petSex, petAge, petStatus, petInfo, petPhoto, clientName} = h
        // 添加复选框
        row.appendChild(sss.check(petId));
        // 信息展示
        const group = [sss.img(petPhoto), petName, petVariety, petSex ? "公" : "母", sss.age(petAge), petStatus, petInfo, clientName];
        for (const key of group) {
            row.appendChild(sss.cell(key))
        }
        // 删除与修改按钮
        row.appendChild(sss.opCell(petId, h));
        return row;
    }//表单数据转json
    function formToJson() {
        const group = ["petId", "petName", "petVariety", "petAge", "petStatus", "clientId", "petInfo"],
            json = {
                "petPhoto": bbb.myImg,
                "petSex": document.getElementById("petSexRad_1").checked
            }
        return Object.assign(sss.getVal(group), json)
    }//json数据转表单
    function jsonToForm(h) {
        const {petSex, petPhoto} = h
        sss.setVal(["petId", "petName", "petVariety", "petAge", "petStatus", "clientId", "clientName", "petInfo"], h)
        bbb.change(petPhoto)
        sss.setSex(petSex, "petSexRad")
    }// 查询下拉框用户名
    function getOther() {
        axios.get("client").then(resp => changeSel(resp.data))
    }// 将用户名赋予下拉框
    function changeSel(json) {
        document.getElementById("clientOp").innerHTML = '<option value=null>无人</option>'
        for (let i = 0; i < json.length; i++) {
            const {roleName, roleId} = json[i]
            document.getElementById("clientOp").innerHTML += '<option value="' + roleId + '">' + roleName + '</option>'
        }
    }
</script>

</html>